<template>
  <div class="content">
    <div class="c-left">
      <gird-list @set-table="setTable" />
      <data-total-1 v-if="onTotal == 0" />
      <data-total-2 v-if="onTotal == 1" />
      <data-total-3 v-if="onTotal == 2" />
      <data-total-4 v-if="onTotal == 3" />
      <data-total-5 v-if="onTotal == 4" />
      <data-total-6 v-if="onTotal == 5" />
      <data-total-7 v-if="onTotal == 6" />
      <data-total-8 v-if="onTotal == 7" />
      <data-total-9 v-if="onTotal == 8" />
    </div>
    <div class="c-map">
      <map-main :listData="dataList" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from "vue";
import { useMassifStore } from "@/store/modules/massif";
const massifStore = useMassifStore();
const GirdList = defineAsyncComponent(() => import("./component/girdList.vue"));
const DataTotal1 = defineAsyncComponent(
  () => import("./component/dataTotal1.vue")
);
const DataTotal2 = defineAsyncComponent(
  () => import("./component/dataTotal2.vue")
);
const DataTotal3 = defineAsyncComponent(
  () => import("./component/dataTotal3.vue")
);
const DataTotal4 = defineAsyncComponent(
  () => import("./component/dataTotal4.vue")
);
const DataTotal5 = defineAsyncComponent(
  () => import("./component/dataTotal5.vue")
);
const DataTotal6 = defineAsyncComponent(
  () => import("./component/dataTotal6.vue")
);
const DataTotal7 = defineAsyncComponent(
  () => import("./component/dataTotal7.vue")
);
const DataTotal8 = defineAsyncComponent(
  () => import("./component/dataTotal8.vue")
);
const DataTotal9 = defineAsyncComponent(
  () => import("./component/dataTotal9.vue")
);
const mapMain = defineAsyncComponent(
  () => import("@/components/mapMain/index.vue")
);
let dataList = ref();

onMounted(() => {
  setMassifList(0);
});
let onTotal = ref(0);
const setTable = (val: number) => {
  setMassifList(val);
  onTotal.value = val;
};
const setMassifList = (val: number) => {
  switch (val) {
    case 0:
      dataList.value = massifStore.massifList.slice(0, 2);
      break;
    case 1:
      dataList.value = massifStore.massifList.slice(0, 2);
      break;
    case 2:
      dataList.value = massifStore.massifList.slice(0, 8);
      break;
    case 3:
      dataList.value = massifStore.massifList.slice(0, 7);
      break;
    case 4:
      dataList.value = massifStore.massifList.slice(0, 7);
      break;
    case 5:
      dataList.value = massifStore.massifList.slice(0, 7);
      break;
    case 6:
      dataList.value = massifStore.massifList.slice(0, 10);
      break;
    case 7:
      dataList.value = massifStore.massifList.slice(0, 10);
      break;
    case 8:
      dataList.value = massifStore.massifList.slice(0, 2);
      break;
    default:
      break;
  }
};
</script>

<style scoped lang="scss">
.content {
  position: relative;
  display: flex;

  .c-left {
    position: absolute;
    top: 88px;
    left: 0;
    z-index: 2;
    width: 500px;
    height: calc(100% - 88px);
    padding: 20px 0 20px 20px;
    background: linear-gradient(
      to right,
      rgb(0 25 46 / 100%),
      rgb(0 25 46 / 80%) 60%,
      rgb(0 25 46 / 10%)
    );
  }

  .c-map {
    flex: 1;
    overflow: hidden;
  }
}
</style>
